var td_per_tr = 4;
var tr_per_page = 5;
var td_per_page = td_per_tr * tr_per_page;
var cur_first_image_index = 0;

function SIP_GetResizedCanvas(img, size, pix_scale) {
  var can = document.createElement('canvas');
  can.width = can.height = size * pix_scale;
  var ctx = can.getContext('2d');
  ctx.scale(size / img.naturalWidth, size / img.naturalHeight);
  ctx.drawImage(img, 0, 0);

  var src = ctx.getImageData(0, 0, size, size);
  var dst = ctx.createImageData(size * pix_scale, size * pix_scale);

  for (var i = 0; i < src.height; ++i) {
    for (var j = 0; j < src.width; ++j) {
      var src_id = (i * src.width + j) * 4;

      for (var x = i * pix_scale; x < (i + 1) * pix_scale; ++x) {
        for (var y = j * pix_scale; y < (j + 1) * pix_scale; ++y) {
          var dst_id = (x * dst.width + y) * 4;
          dst.data[dst_id] = src.data[src_id];
          dst.data[dst_id + 1] = src.data[src_id + 1];
          dst.data[dst_id + 2] = src.data[src_id + 2];
          dst.data[dst_id + 3] = src.data[src_id + 3];
        }
      }
    }
  }
  ctx.putImageData(dst, 0, 0);
  return can;
}

function SIP_GetGrayCanvas(colored_canvas) {
  var size = colored_canvas.width;
  var src = colored_canvas.getContext('2d').getImageData(0, 0, size, size);

  var gray_canvas = document.createElement('canvas');
  gray_canvas.width = gray_canvas.height = size;
  var ctx = gray_canvas.getContext('2d');

  for (var i = 0; i < src.data.length; i += 4) {
    var gray = parseInt(src.data[i] * 0.299 + src.data[i+1] * 0.587 + src.data[i+2] * 0.114);
    src.data[i] = src.data[i+1] = src.data[i+2] = gray;
  }
  ctx.putImageData(src, 0, 0);
  return gray_canvas;
}

function SIP_GetBlackWhiteCanvas(gray_canvas) {
  var size = gray_canvas.width;
  var src = gray_canvas.getContext('2d').getImageData(0, 0, size, size);

  var bw_canvas = document.createElement('canvas');
  bw_canvas.width = bw_canvas.height = size;
  var ctx = bw_canvas.getContext('2d');

  var avg = 0;
  for (var i = 0; i < src.data.length; i += 4) {
    avg += src.data[i];
  }

  avg /= size * size;
  for (var i = 0; i < src.data.length; i += 4) {
    if (src.data[i] < avg) {
      src.data[i] = src.data[i+1] = src.data[i+2] = 0;
    } else {
      src.data[i] = src.data[i+1] = src.data[i+2] = 255;
    }
  }
  ctx.putImageData(src, 0, 0);
  return bw_canvas;
}

function SIP_ShowImageProperties(idx) {
  var img = data.images[idx].attached_image;
  var tr = img.corresponding_tr;
  if (tr == null) {
    tr = document.createElement('tr');
    img.corresponding_tr = tr;

    var size = 8;
    var pix_scale = 8;

    var td = document.createElement('td');
    var colored_canvas = SIP_GetResizedCanvas(img, size, pix_scale);
    td.appendChild(colored_canvas);
    tr.appendChild(td);

    td = document.createElement('td');
    var gray_canvas = SIP_GetGrayCanvas(colored_canvas);
    td.appendChild(gray_canvas);
    tr.appendChild(td);

    td = document.createElement('td');
    var bw_canvas = SIP_GetBlackWhiteCanvas(gray_canvas);
    td.appendChild(bw_canvas);
    tr.appendChild(td);

    td = document.createElement('td');
    td.appendChild(UTIL_GetBlackWhiteCanvasUsingULongStr(data.images[idx][2]));
    tr.appendChild(td);
  }

  var table = document.getElementById('id_table_image_properties');
  table.appendChild(tr);
}

function SIP_ReverseShowingStatus(idx) {
  var img = data.images[idx].attached_image;
  var s = img.properties_showed;
  img.properties_showed = 1 - s;
  if (s == 0) {
    SIP_ShowImageProperties(idx);
  } else {
    var table = document.getElementById('id_table_image_properties');
    table.removeChild(img.corresponding_tr);
  }
}

function SIP_ShowPrevImagePage() {
  cur_first_image_index -= td_per_page;
  if (cur_first_image_index < 0) {
    cur_first_image_index = 0;
  } else {
    SIP_ShowImages();
  }
}

function SIP_ShowNextImagePage() {
  cur_first_image_index += td_per_page;
  if (cur_first_image_index >= data.images.length) {
    cur_first_image_index -= td_per_page;
  } else {
    SIP_ShowImages();
  }
}

function SIP_ShowImages() {
  var table = document.getElementById('id_table_images');
  UTIL_RemoveAllChildren(table);
  var idx = cur_first_image_index;

  for (var i = 0; i < tr_per_page; ++i) {
    if (idx >= data.images.length) break;
    var tr = document.createElement('tr');

    for (var j = 0; j < td_per_tr; ++j) {
      if (idx >= data.images.length) break;
      if (data.images[idx].attached_image == null) {
        var img = new Image();
        img.src = data.images[idx][0];
        img.properties_showed = 0;
        img.corresponding_tr = null;
        img.setAttribute('onclick', 'SIP_ReverseShowingStatus(' + idx + ');');
        data.images[idx].attached_image = img;
      }

      var td = document.createElement('td');
      td.appendChild(data.images[idx].attached_image);
      tr.appendChild(td);
      ++idx;
    }
    table.appendChild(tr);
  }
}

function SIP_HandleKeyDown(){ 
  var event = document.all ? window.event : arguments[0]; 
  if (event.keyCode == 37) SIP_ShowPrevImagePage();
  if (event.keyCode == 39) SIP_ShowNextImagePage();
} 

function SIP_ShowImagePropertiesInit() {
  document.onkeydown = SIP_HandleKeyDown; 
  SIP_ShowImages();
}
